<template>
    <PageWrapper title="通知列表">
        <Spin :spinning="loading">
            <div class="content p-4">
                <!-- 表格 -->
                <BasicTable @register="registerTable">
                    <template #toolbar>
                        <a-button type="primary" @register="registerModal" @click="openAddModal"
                            >发布通知</a-button
                        >
                    </template>
                    <template #type="{ text }">
                        <Tag v-if="text == 1" color="volcano">系统通知</Tag>
                        <Tag v-else-if="text == 2" color="geekblue">用户通知</Tag>
                    </template>
                    <template #image="{ record }">
                        <div v-if="record.image" class="unsend">
                            <TableImg class="check-img" :imgList="[record.image]" :size="40" />
                        </div>
                        <div class="unsend" v-else>未上传</div>
                    </template>
                    <!-- 操作 -->
                    <template #action="{ record }">
                        <TableAction
                            :actions="[
                                {
                                    label: '删除',
                                    icon: 'noto:multiply',
                                    popConfirm: {
                                        title: '确定要删除吗?',
                                        okText: '确定',
                                        cancelText: '取消',
                                        confirm: () => deleteNoticeEvent(record._id),
                                    },
                                },
                            ]"
                        />
                    </template>
                </BasicTable>
            </div>
        </Spin>
        <Modal @register="registerModal" @updateData="updateTable"></Modal>
    </PageWrapper>
</template>

<script lang="ts">
    import { defineComponent, ref } from 'vue'
    import { Tag, Spin, message } from 'ant-design-vue'
    import { PageWrapper } from '/@/components/Page'
    import { BasicTable, useTable, TableImg, TableAction } from '/@/components/Table'
    import { dataListApi, deleteApi } from '/@/api/notice/index'
    import { DeleteParams, DataListParams } from '/@/api/notice/model'
    import { FormConfig, Columns } from './model'
    import { useModal } from '/@/components/Modal'
    import Modal from './components/edit.vue'

    export default defineComponent({
        name: 'HouseList',
        components: { PageWrapper, BasicTable, Tag, TableImg, TableAction, Spin, Modal },
        setup() {
            const loading = ref(false)
            // 表格
            const [registerTable, { reload }] = useTable({
                title: '通知列表',
                titleHelpMessage: '展示通知列表',
                canResize: true,
                useSearchForm: true,
                bordered: true,
                rowKey: '_id',
                showTableSetting: true,
                formConfig: FormConfig,
                immediate: true,
                actionColumn: {
                    title: '操作',
                    dataIndex: 'action',
                    fixed: 'left',
                    width: 100,
                    slots: { customRender: 'action' },
                },
                api: async (data) => {
                    const res = await dataListApi(data)
                    console.log(res)
                    return {
                        items: res.list,
                        total: res.count,
                    }
                },
                beforeFetch: (pageData) => {
                    console.log('页面数据', pageData)

                    const data: DataListParams = {
                        page: pageData.page,
                        limit: pageData.pageSize,
                        type: pageData.type || null,
                        title: pageData.title ? pageData.title : '',
                    }
                    return data
                },
                columns: Columns,
            })

            const [registerModal, { openModal }] = useModal()

            // 更新表格
            const updateTable = () => {
                reload()
            }

            const openAddModal = () => {
                openModal()
            }

            // 删除事件
            const deleteNoticeEvent = async (id: any) => {
                try {
                    loading.value = true
                    const data: DeleteParams = {
                        _id: id,
                    }
                    const res = await deleteApi(data)
                    if (res) {
                        message.success('删除成功')
                    } else {
                        message.error('删除失败')
                    }
                    // 删除成功
                    loading.value = false
                    reload()
                } catch (error) {
                    loading.value = false
                    message.error('删除失败')
                    console.log(error)
                }
            }

            return {
                registerTable,
                loading,
                deleteNoticeEvent,
                openAddModal,
                registerModal,
                updateTable,
            }
        },
    })
</script>

<style lang="less">
    .vben-basic-table-img.check-img {
        height: 46px !important;
        align-content: center;
        justify-content: center;

        .ant-image {
            margin: auto;

            .ant-image-img {
                width: 40px;
                height: 40px;
                object-fit: cover;
            }
        }
    }

    .unsend {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 46px;
    }
</style>
